<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>task 6</title>
	<link rel="stylesheet" type="text/css" href="css/task6.css">
</head>
<body>
	<!-- 头部 -->
	<nav>
		<!-- logo -->
		<div class="navLogo">ife.baidu.com</div>
		<div class="navDate">2016.03</div>
	</nav>
	<!-- 内容 -->
	<div class="container">
		<!-- 第一列内容 -->
		<div class="sectionA">
			<div class="sectionAl">
				<div class="left"></div>
				<img src="images/task6-1.jpg">
				<div class="right"></div>
			</div>
			<div class="sectionAr">
				<div class="title">
					<a href="#"><b>A</b>BOUT</a>
					<a href="#"><b>T</b>ECHNOLOGE</a>
					<p>About Technologe About Technologe About Technologe About Technologe</p>
				</div>
				<div class="content">
					<span>700</span>
					<span>3.2</span>
					<div class="fr">
						<p class="p1">css</p>
						<p class="p2">csscsscsscsscss</p>
					</div>
				</div>
			</div>
		</div>
		<!-- 第二列内容 -->
		<div class="sectionB">
			<div class="sectionBWhat">
				<a href="#">What</a>
				前端前端前端前端前端前端前端前端前端前端前端
				前端前端前端前端前端前端前端前端前端前端前端
				前端前端前端前端前端前端前端前端前端前端前端
				前端前端前端前端前端前端前端前端前端前端前端
				前端前端前端前端前端前端前端前端前端前端前端
				前端前端前端前端前端前端前端前端前端前端前端
				前端前端前端前端前端前端前端前端前端前端前端
				前端前端前端前端前端前端前端前端前端前端前端
			</div>
			<div class="sectionBWhen">
				<a href="#">When</a>
				前端前端前端前端前端前端前端前端前端
				前端前端前端前端前端前端前端前端前端
				前端前端前端前端前端前端前端前端前端
				前端前端前端前端前端前端前端前端前端
				前端前端前端前端前端前端前端前端前端
				前端前端前端前端前端前端前端前端前端
				前端前端前端前端前端前端前端前端前端
				前端前端前端前端前端前端前端前端前端
				前端前端前端前端前端前端前端前端前端
			</div>
			<div class="sectionBHow">
				<a href="#">How</a>
				前端前端前端前
				前端前端前端前
				前端前端前端前
				<ul>
					<li>What -----<span> 40%</span></li>
					<li>What -----<span> 30%</span></li>
					<li>What -----<span> 30%</span></li>
				</ul>
			</div>
		</div>
		<!-- 第三列内容 -->
		<div class="sectionC">
			<div class="sectionCl">
				<div class="sectionCltitle">
					<p>
						<span class="strong">THE</span>
						TECHNOLOGE OF FRONT
					</p>
					<p>前端技术领域</p>
				</div>
				<div class="sectionClcontent">
					<p>
						<span class="strong">前</span>
						端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前
						<img src="images/task6-3.jpg">端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端

					</p>
				</div>
			</div>
			<div class="sectionCr">
				<div class="sectionCrtitle">
					<p><span class="strong">前端技术</span> 前端技术前端技术</p>
				</div>
				<div class="sectionCrcontent">
					<ul>
						<li>前端前端前端前端..........................<span>前端</span></li>
						<li>前端前端前端前端前端前端..................<span>前端</span></li>
						<li>前端前端前端前端...........................<span>前端</span></li>
					</ul>
					<div class="bottom">
						<div class="fl">
							<div class="strong">0</div>
							<p class="strong">ONE TWO</p>
							<p class="strong">THREE FOUR FIVE</p>
							<p>hello world heo</p>
							<p>hello world</p>
						</div>
						<div class="fr">
							<span class="dot">“</span>
							      world hello world
hello world hello world
hello world hello world
hello world hello world
hello world hello world
hello world  <span class="dot">”</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 底部 -->
	<footer>
		ife.baidu.com
	</footer>

</body>
</html>